<template>
    <div class="site-wrapper site-page--login">
        <div class="login-main" v-show="showLogin">
          <h2 class="login-title">登录 <small>(中心)</small></h2>
          <i-form ref="formInline" :model="formInline" :rules="ruleInline">
            <Form-item prop="user">
              <i-input type="text" v-model="formInline.user" placeholder="用户名" style="width: 300px" size="large">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </i-input>
            </Form-item>
            <Form-item prop="password">
              <i-input type="password" v-model="formInline.password" placeholder="密码" style="width: 300px" size="large">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                <Icon type="ios-lock-outline"></Icon>
              </i-input>
            </Form-item>
            <Form-item prop="identifyingCode">
              <i-input type="text" v-model="formInline.identifyingCode" placeholder="验证码" style="width: 150px; float:left" size="large">
              </i-input>
              <img :src="captchaPath" @click="getVerifyCode()" alt="验证码" title="点击换一张">
            </Form-item>
            <Form-item>
              <i-button style="width: 300px; float:left" type="primary"  @click="handleSubmit()">登录</i-button>
            </Form-item>
            <p class="register">没有账号？<a href="#register" target="_blank">免费申请</a></p>
          </i-form>
        </div>
    </div>
</template>

<script>
  import  api  from '@/api/api'
  import {getCaptcha,login} from '../api/test'
  import { getUUID} from '@/api/index'
export default{
  data () {
    return {
      formInline: {
        user: '',
        password: '',
        identifyingCode: '',
        uuid: ''
      },
      captchaPath: '',
      ruleInline: {
        user: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 5, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        identifyingCode: [
          { required: true, message: '请填写验证码', trigger: 'blur' },
          { type: 'string', length: 4, message: '验证码长度不匹配', trigger: 'blur' }
        ]
      },
      showLogin: true,
      showTishi: false,
      newUsername: '',
      newPassword: ''
    }
  },
  created () {
    this.getVerifyCode()
  },
  methods: {
    handleSubmit () {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          sessionStorage.setItem('user', JSON.stringify(this.formInline.user));
          let params = {
            username:this.formInline.user,
            password:this.formInline.password,
            captcha:this.formInline.identifyingCode
          }
          login(params).then((res) => {
            debugger;
            if (res.data.code && res.data.code === 200) {
              //this.$router.push({name: 'home'})
              this.$router.push({ path: '/table' });
            }else{
              this.$Message.error({
                content: res.data.msg,
                duration: 10,
                closable: true
              });
            }
          }).catch(e => console.log(e))

        }
      })
    },
    // 获取验证码
    getVerifyCode () {
       this.formInline.uuid = getUUID()
      //getVerifyCode1  api.getCaptcha
        getCaptcha(this.formInline.uuid).then((res) => {
        this.captchaPath = `data:image/jpeg;base64,${res.data.data}`
      }).catch(e => console.log(e))
    }
  }
}
</script>
<style lang="scss">
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(38, 50, 56, 0.6);
    overflow: hidden;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: "";
      background-image: url(~@/assets/1111.jpg);
      background-size:100% 100%
    }
    .site-content__wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: transparent;
    }
    .site-content {
      min-height: 100%;
      padding: 30px 500px 30px 30px;
    }
    .brand-info {
      margin: 220px 100px 0 90px;
      color: #fff;
    }
    .brand-info__text {
      margin:  0 0 22px 0;
      font-size: 48px;
      font-weight: 400;
      text-transform : uppercase;
    }
    .brand-info__intro {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.58;
      opacity: .6;
    }
    .login-main {
      position: absolute;
      top: 15%;
      bottom: 15%;
      right: 7%;
      padding: 50px 60px;
      width: 450px;
      height: 400px;
      min-height: 30%;
      background-color: #fff;
    }
    .login-title {
      font-size: 22px;
      font-weight:400;
      line-height:1;
      margin-bottom:35px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;
      margin-top: 38px;
    }
  }
  i-input{
    display:block;
    width:300px;
    height:40px;
    line-height:40px;
    margin:0 auto;
    margin-bottom: 10px;
    outline:none;
    border:1px solid #888;
    padding:10px;
    box-sizing:border-box;
  }

</style>
